<template>
  <div class="c-bg-sgray c-ph24 c-pt24">
    <div class="c-ph24 c-pv24 c-bg-white c-br12 c-flex-column c-mb24" v-for="(item,index) in collageList" :key="index" @click="goDetail(index)">
      <div class="c-flex-row c-justify-sb c-aligni-center c-w100">
        <div class="c-bd1 c-ww180 c-maxh120 c-text-hidden c-br12">
          <div class="c-w100 c-p">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'c-block c-maxh'" :fontClass="{
              boxStyle: 'c-pv20 c-pl12',
              name: 'c-fs26 c-text-ellipsis1 c-fw-b',
              duration: 'c-fs20'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
              v-if="item.vipInfo && item.vipInfo.cover && (item.vipInfo.cover.coverType ==1 || item.vipInfo.cover.coverType ==2)"/>
            <img v-else class="c-w100 c-block c-maxh" :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.collageVip ? require('../../../assets/i/wap/course/vip.png') : (item.prodType == cfrom.collageSvip ? require('../../../assets/i/wap/course/svip.png') : require('../../../assets/defult270.png'))))" />
          </div>
        </div>
        <div class="c-flex-column c-justify-sb c-ml20 c-w0 c-flex-grow1 c-hh120">
          <div class="c-text-ellipsis1 c-fs24 c-fc-xblack">{{item.title}}</div>
          <div class="c-flex-row c-aligni-center">
            <span class="c-fs18 c-fc-gray">购买{{TypeName(item.prodType)}}</span>
            <span class="c-fs18 c-fc-gray c-ph4">|</span>
            <span class="c-fs18 c-fc-gray">{{item.payTime}}</span>
          </div>
          <div class="c-flex-row c-justify-sb c-aligni-center">
            <span class="c-fs18 theme-fc">{{'￥' | iosPriceFilter}}<span class="c-fs24">{{item.collagePrice}}</span></span>
            <div class="c-fs24 theme-fc c-textAlign-r c-lh" v-if="item.payStatus == 1 || item.payStatus == 2">{{item.payStatus == 1 ? '拼团中...' : '拼团成功'}}</div>
            <div class="c-fs24 c-fc-xblack c-textAlign-r c-lh" v-if="item.payStatus == -1 || item.payStatus == -2">{{item.payStatus == -1 ? '拼团失败/已退款' : '拼团失败/待退款'}}</div>
          </div>
        </div>
      </div>
    </div>

    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (collageList.length > 0)" :noData="collageList.length == 0" :noDataText="'暂无相关记录'"></loading-status-tem>
  </div>
</template>


<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: "MyCollageList",
  components: {
    loadingStatusTem,
    VipCustomImg,
  },
  props: [],
  data() {
    return {
      cfrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      is_page: false,
      page: 1,
      limit: 10,
      collageList: [],
      isLoading: false,
    };
  },
  created() {
    //app调用我们的分享链接
    utilJs.appShare(this);
  },
  methods: {
    // 购买类型文字描述
    TypeName: function (val) {
      return val == this.cfrom.collageColumn || val == this.cfrom.column ? '专栏'
      : val == this.cfrom.collageCourse || val == this.cfrom.course ? '课程'
      : val == this.cfrom.collageVip || val == this.cfrom.vip ? 'VIP'
      : val == this.cfrom.collageSvip || val == this.cfrom.svip ? 'SVIP'
      : val == this.cfrom.collageActivity || val == this.cfrom.activity ? '活动'
      : val == this.cfrom.collagePackage || val == this.cfrom.package ? '知识套餐'
      : val == this.cfrom.collageCamp || val == this.cfrom.camp ? '训练营'
      : val == this.cfrom.collageLive || val == this.cfrom.live ? '直播'
      : val == this.cfrom.collageSocial || val == this.cfrom.social ? '社群'
      : val == this.cfrom.collageItemBank || val == this.cfrom.itemBank ? '练习'
      : val == this.cfrom.collagePrivateClass || val == this.cfrom.privateClass ? '小班课'
      : val == this.cfrom.collageClockIn || val == this.cfrom.clockIn ? '打卡'
      : val == this.cfrom.collageEdu || val == this.cfrom.edu ? '面授课'
      : val == this.cfrom.collageEbooks || val == this.cfrom.ebooks ? '电子书'
      : val == this.cfrom.collagePersonalLive || val == this.cfrom.personalLive ? '直播间'
      : val == this.cfrom.shopping ? '实体商品'
      : ''
    },
    //跳转到拼团详情
    goDetail: function (index) {
      let collage = this.collageList[index];
      if (collage.prodType == this.cfrom.shopping) {
        this.$routerGo(this, "push", { path: "/homePage/collage/collageDetail", query: { isMall: 1, orderId: collage.orderId } });
        return
      }
      this.$routerGo(this, "push", { path: "/homePage/collage/collageDetail", query: { groupId: collage.groupId, collageId: collage.collageId } });
    },
    //分页获取我的拼团列表
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'collage/getMyCollage?page=' + this.page + '&limit=' + this.limit, function (res) {
          if ($this.page == 1) {
            $this.collageList = res.data ? res.data : [];
          } else {
            let list = res.data;
            $this.collageList = $this.collageList.concat(list);
          }
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page;

          $this.isLoading = false;
        });
      }
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的拼团", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的拼团", "", shareUrl, "");
    },
    windowScrollFunction: function () {
      //下拉滑动加载更多
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    initData() {
      this.is_page = false;
      this.page = 1;
      this.collageList = [];
      this.getMore();
    }
  },
  activated() {
    //这个是我参与的拼团列表，包括了：课程，专栏，活动，vip,svip
    setDocumentTitle("我的拼团");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.collageList, this.page)) {
      this.initData();
    }
    this.wechatShare();
    this.isLoading = false;
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>


